﻿@page "/listview/nested-list"
@using Syncfusion.Blazor.Lists
@inject Microsoft.AspNetCore.Components.NavigationManager UriHelper
@inherits SampleBaseComponent

<SampleDescription>
    <p>This sample demonstrates the nested list functionalities, which allows you to navigate to the sub list items by clicking any item and navigating back to the list item using the back icon at the top left.</p>
</SampleDescription>
<ActionDescription>
   <p>The ListView component supports nested list. To achieve list navigation, the <code><a target='_blank' class='code' href='https://help.syncfusion.com/cr/cref_files/blazor/Syncfusion.Blazor~Syncfusion.Blazor.Lists.ListViewFieldSettings~Child.html'>Child</a></code> property should be defined for the nested list in the array of JSON.</p>
   <p>This sample has a nested folder with the subfolders or files.</p>
</ActionDescription>

<div class="control-section">
    <SfListView CssClass="nestedlist" DataSource="@ListData" ShowHeader="true" HeaderTitle="Folder" ShowIcon="true">
        <ListViewFieldSettings TValue="DataModel" Id="Id" Text="Text" Child="Child" IconCss="Icon" Tooltip="Text"></ListViewFieldSettings>
    </SfListView>
</div>

@code{
    List<DataModel> ListData = new List<DataModel>();

    class DataModel
    {
        public string Id { get; set; }
        public string Text { get; set; }
        public string Icon { get; set; }
        public List<DataModel> Child { get; set; }
    }

    protected override void OnInitialized()
    {
        base.OnInitialized();
        ListData.Add(new DataModel
        {
            Id = "01",
            Text = "Music",
            Icon = "folder",
            Child = new List<DataModel>() { new DataModel { Id = "01-01", Text = "Gouttes.mp3", Icon = "file" } }

        });
        ListData.Add(new DataModel
        {

            Id = "02",
            Text = "Videos",
            Icon = "folder",
            Child = new List<DataModel>() {
                    new DataModel { Id= "02-01", Text= "Naturals.mp4", Icon= "file" },
                    new DataModel { Id= "02-02", Text= "Wild.mpeg", Icon= "file" },
                }

        });
        ListData.Add(new DataModel
        {

            Id = "03",
            Text = "Documents",
            Icon = "folder",
            Child = new List<DataModel>() {
                   new DataModel { Id= "03-01", Text= "Environment Pollution.docx", Icon= "file" },
                   new DataModel { Id= "03-02", Text= "Global Water, Sanitation, & Hygiene.docx", Icon= "file" },
                   new DataModel { Id= "03-03", Text= "Global Warming.ppt", Icon= "file" },
                   new DataModel { Id= "03-04", Text= "Social Network.pdf", Icon= "file" },
                   new DataModel { Id= "03-05", Text= "Youth Empowerment.pdf", Icon= "file" }
                }
        });

        ListData.Add(
            new DataModel
            {
                Id = "04",
                Text = "Pictures",
                Icon = "folder",
                Child = new List<DataModel>() {
                new DataModel { Id= "04-01", Text= "Camera Roll", Icon= "folder", Child= new List<DataModel>() {
                    new DataModel { Id= "04-01-01", Text= "WIN_20160726_094117.JPG", Icon= "file" },
                    new DataModel { Id= "04-01-02", Text= "WIN_20160726_094118.JPG", Icon= "file" },
                    new DataModel { Id= "04-01-03", Text= "WIN_20160726_094119.JPG", Icon= "file" } }
                },
                new  DataModel { Id= "04-02", Text= "Wind.jpg", Icon= "file" },
                new DataModel { Id= "04-02", Text= "Stone.jpg", Icon= "file" },
                new  DataModel { Id= "04-02", Text= "Home.jpg", Icon= "file" },
                new DataModel { Id= "04-02", Text= "Bridge.png", Icon= "file" } }
            });
        ListData.Add(
            new DataModel
            {
                Id = "05",
                Text = "Downloads",
                Icon = "folder",
                Child = new List<DataModel>() {
                new DataModel { Id= "05-01", Text= "UI-Guide.pdf", Icon= "file" },
                new DataModel { Id= "05-02", Text= "Tutorials.zip", Icon= "file" },
                new DataModel { Id= "05-03", Text= "Game.exe", Icon= "file" },
                new DataModel { Id= "05-04", Text= "TypeScript.7z", Icon= "file" }, }
            });
    }
}


<style>

    .e-listview .e-list-icon {
        height: 24px;
        width: 30px;
    }

    .folder {
        background-repeat: no-repeat;
        background-image: url('@UriHelper.ToAbsoluteUri($"images/listview/file-icons.png")');
        background-position: -5px -466px;
        background-size: 302%;
    }

    .file {
        background-repeat: no-repeat;
        background-image: url('@UriHelper.ToAbsoluteUri($"images/listview/file-icons.png")');
        background-position: -5px -151px;
        background-size: 302%;
    }

    .nestedlist {
        max-width: 500px;
        margin: auto;
        border: 1px solid #dddddd;
        border-radius: 3px;
    }
</style>